<!-- 搜索框 需要搜索框名称title和inpurt提示文字placeholder-->
<template>
  <div class="search-item">
    <p class="search-title">{{title}}</p>
    <input
      type="text"
      class="search-content"
      :placeholder="placeholder"
      v-model="value"
    />
    <div class="icon-wrapper">
      <i class="fas fa-search"></i>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({
  name: "SearchItem",
})
export default class extends Vue {
  @Prop()placeholder!:string;
  @Prop() title!: string;
  value = "";
  clearValue(): void {
    this.value = "";
  }
}
</script>
<style>
.search-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.search-title {
  font-weight: 700;
  color: #2d8cf0;
}
.search-content {
  margin-left: 12px;
  outline: none;
  border: 1px solid #dcdee2;
  padding: 3.2px 5.6px;
  border-top-left-radius: 3.2px;
  border-bottom-left-radius: 3.2px;
  font-size: 12px;
  box-sizing: border-box;
  height: 100%;
  border-right: none;
}
.icon-wrapper {
  padding: 0 13px;
  font-size: 12px;
  background-color: #2d8cf0;
  color: white;
  display: flex;
  height: 100%;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom-right-radius: 3.2px;
  border-top-right-radius: 3.2px;
}
</style>